<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">客户管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <%--            <li class="layui-nav-item">--%>
            <%--                <a href="javascript:;">nav groups</a>--%>
            <%--                <dl class="layui-nav-child">--%>
            <%--                    <dd><a href="">menu 1</a></dd>--%>
            <%--                    <dd><a href="">menu 2</a></dd>--%>
            <%--                    <dd><a href="">menu 3</a></dd>--%>
            <%--                </dl>--%>
            <%--            </li>--%>
            <li class="">
                <div class="layui-logo layui-hide-xs layui-bg-black"> 客户信息管理 </div>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    用户名
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人中心</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="javascript:;">退出系统</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/freelance">自由职业者信息</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/project">项目信息</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/client">客户信息</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/schedule">时间表信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">审计管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/audit">审计信息</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/securitylog">安全日志</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">其他</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 20px;" ></div>

        <form class="layui-form" action="">
            <div class="layui-row">
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">查询字段</label>
                            <div class="layui-input-block">
                                <select id="selects" name="deptsname" lay-filter="dept">
                                    <option value="0" selected="true">ID</option>
                                    <option value="1">姓名</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input id="demoReload" type="text" name="title" lay-verify="title" autocomplete="off"
                                       placeholder="请输入要查找的内容" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-form-item">
                            <button class="layui-btn" data-type="reload" type="button">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <table class="layui-hide" id="clientTable" lay-filter="clientTable"></table>

        <script type="text/html" id="colBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
        </script>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->

    </div>
</div>
<script src="layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util' , 'table' , 'dropdown'], function(){
        var element = layui.element //元素操作
            ,layer = layui.layer
            ,util = layui.util
            ,table = layui.table //表格
            ,dropdown = layui.dropdown //下拉菜单
            ,$ = layui.$;

        //监听Tab切换
        element.on('tab(clientTable)', function(data){
            layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                tips: 1
            });
        });

        layui.use('element', function () {
            var $ = layui.jquery
                , element = layui.element;

            element.on('nav()', function(data){

            })
        });


        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

        //执行一个 table 实例
        table.render({
            elem: '#clientTable'
            ,id: 'clientTable'
            ,url: '${pageContext.request.contextPath}/client/findAll' //数据接口
            ,title: '客户表'
            ,page: true //开启分页
            ,height: $(document).height() - $('#clientTable').offset().top - 230 //分页置底
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            // ,totalRow: true //开启合计行
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:150, sort: true, fixed: 'left', totalRowText: '合计：'}
                ,{field: 'name', title: '姓名', width:150}
                ,{field: 'telephone', title: '电话', width: 150, totalRow: true}
                ,{field: 'email', title: '邮箱', width:180, totalRow: true}
                ,{field: 'address', title: '地址', width:250}
                ,{field: 'type', title: '类型', width: 150}
                ,{fixed: 'right', title: '其他操作', width: 220, align:'center', toolbar: '#colBar'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(clientTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(clientTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.alert("查看ID : "+data.id+" 的行");
            } else if(layEvent === 'more'){
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    ,show: true //外部事件触发即显示
                    ,data: [{
                        title: '编辑'
                        ,id: 'edit'
                    },{
                        title: '删除'
                        ,id: 'del'
                    }]
                    ,click: function(menudata){
                        if(menudata.id === 'del'){
                            layer.confirm('真的删除行么', function(index){
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        } else if(menudata.id === 'edit'){
                            layer.msg('编辑操作，当前行 ID:'+ data.id);
                            <%--layer.open({--%>
                            <%--    type: 2,--%>
                            <%--    closeBtn: 2,--%>
                            <%--    title:'修改自由职业者信息',--%>
                            <%--    area: ['400px', '480px'],--%>
                            <%--    shade: 0.8,--%>
                            <%--    id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748--%>
                            <%--    btnAlign: 'r',--%>
                            <%--    moveType: 1, //拖拽模式，0或者1--%>
                            <%--    content: '${pageContext.request.contextPath}/jsp/layer/editFreelance.jsp?id=' + data.id--%>
                            <%--        + "&freelance_name=" + encodeURI(encodeURI(data.name))--%>
                            <%--        +"&freelance_tel=" + data.telephone--%>
                            <%--        + "&freelance_email=" + data.email--%>
                            <%--        + "&freelance_address=" + data.address--%>
                            <%--        + "&freelance_type=" + data.type--%>
                            <%--});--%>
                        }
                    }
                    ,style: 'margin-left: -45px; box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload').val();//获取输入框的值
                var  selects = $('#selects').val();//获取输入框的值
                //alert(demoReload+selects);
                //执行重载
                table.reload('testTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: { valu: demoReload,domain:selects}//这里传参  向后台
                    , url: '/dept/findAllDeptPageBy'//后台做模糊搜索接口路径
                    , method: 'post'
                });
            }
        };

        //这个是用于创建点击事件的实例
        $('.layui-form-item .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        function a() {
            $(".layui-laypage-btn").click();
        }

    });
</script>
</body>
</html>